<template>
	<view class="classify">
		<!-- 搜索框 -->
		<view class="search" @click="toSearch">
			<input type="text" value="" placeholder="想要,不妨来搜一搜"/>
		</view>
		<view class="classify-box">
			<view class="c-l">
				<view class="l-item" v-for="(item, i) in classifyList" :key="i"
				 :class="{'select': selectId == item.classifyId}" @click="tabClick(item.classifyId)">{{item.classifyName}}</view>
			</view>
			<view class="c-r">
				<view class="block" v-for="(item,i) in  classifyList" :key="i">
					<view class="title">{{item.classifyName}}</view>
					<view class="block-box">
						<view class="b-item" v-for="(item1,i1) in item.childrenList" :key="i1" @click="toProductList(item1.classifyId)">
							<image :src="item1.classifyPicture" mode=""></image>
							<text>{{item1.classifyName}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '../../../util/api.js'
	export default {
		data() {
			return {
				classifyList:[],
				selectId:0
			};
		},
		onLoad: function (option) { 
      Api.fetchPost('/fsbus/D3001',{}).then(res=>{
				if(res.errorNo == 0){
					this.classifyList = res.results.data;
					if(this.classifyList.length>0){
						this.selectId = this.classifyList[0].classifyId;
					}
				}
			}).then(err=>{
				
			})
    },
		methods: {
			tabClick(id){
				this.selectId = id;
			},
			toProductList(classifyId){
				uni.navigateTo({
						url: '/pages/product/list/list?classifyId='+classifyId
				});
			}
		}
	}
</script>

<style>
.classify {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #f3f3f3;
	font-size: 26upx;
	display: flex;
	flex-direction: column;
}
.search {
	padding: 10upx 20upx;
	background-color: #fff;
}
.search input {
	width: 100%;
	height: 66upx;
	background-color: #E6E6E6;
	border-radius: 66upx;
	padding-left: 20upx;
}
.classify-box {
	width: 100%;
	margin-top: 15upx;
	flex: 1;
	display: flex;
}
.classify-box .c-l {
	width: 180upx;
	background-color: #fff;
	margin-right: 15upx;
	overflow: auto;
}
.classify-box .l-item {
	width: 100%;
	height: 90upx;
	border-bottom: 1px solid #ccc;
	text-align: center;
	line-height: 90upx;
	overflow: hidden;
}
.classify-box .l-item.select {
	background-color: #4C4C4C;
	color: #fff;
}
.classify-box .l-item:last-child {
	border-bottom: 0;
}
.classify-box .c-r {
	flex: 1;
	overflow: auto;
}
.classify-box .block {
	background-color: #fff;
	margin-bottom: 20upx;
	padding: 20upx;
	overflow: hidden;
}
.classify-box .block .title {
	margin-bottom: 30upx;
}
.classify-box .b-item {
	width: 33%;
	text-align: center;
	float: left;
	margin-bottom: 30upx;
}
.classify-box .b-item image {
	width: 108upx;
	height: 108upx;
	background-color: #E6E6E6;
	border-radius: 100%;
}
.classify-box .b-item text {
	display: block;
}
</style>
